<template>
  <div>
    <h2 @click='fn2'>{{name}}{{age}}</h2>
    <input
      type="text"
      v-model='name'
    >
    <input
      type="text"
      v-model="age"
    >
    <h1>{{fn()}}---{{reverName}}</h1>

  </div>
</template>
<script>
// @ is an alias to /src
export default {
  name: "XXX",
  data() {
    return {
      name: "1234",
      age: 100,
      reverName: "4321",
    };
  },
  methods: {
    fn() {
      console.log("fn");
      return this.name.split("").reverse().join("");
    },
    fn2() {
      this.reverName = 789;
    },
  },
  computed: {
    //  什么时候使用计算属性？ 当发现有明显的依赖关系的时候 建议使用
    // reverName() {
    //   console.log("reverName");
    //   // 只有当前函数的依赖（在当前函数中同步使用的vue变量）发生改变的时候 才会触发这个函数
    //   // console.log(this.age);
    //   return this.name.split("").reverse().join("");
    // },
    // reverName: {
    //   get() {
    //     setTimeout(() => {
    //       console.log(this.age);
    //     }, 10);
    //     console.log("reverName");
    //     return this.name.split("").reverse().join("");
    //   },
    //   set(val) {
    //     console.log(val);
    //     this.name = (val + "").split("").reverse().join("");
    //   },
    // },
  },
  watch: {
    name(val, oldVal) {
      console.log(val, oldVal);
      this.reverName = (val + "").split("").reverse().join("");
    },
  },
};
/* 
  什么时候使用计算属性？ 
  当有一个变量 需要使用多个变量共同计算得出的时候 我们推荐使用计算属性

  什么时候使用侦听器？
  当多个变量 同时使用了某一个变量的时候 我们推荐使用侦听器去侦听这个变量
  

*/
</script>
<style lang="less">
</style>